<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 喝水小管家</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8fafc;
        }
        .status-bar {
            background-color: #000;
            color: white;
            padding: 5px 15px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #64748b;
            font-size: 10px;
        }
        .nav-item.active {
            color: #3b82f6;
        }
        .nav-icon {
            font-size: 22px;
            margin-bottom: 3px;
        }
        .section-header {
            font-size: 14px;
            color: #64748b;
            margin-bottom: 8px;
            font-weight: 600;
        }
        .avatar-upload {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        .avatar-upload .avatar-edit {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 1;
        }
        .avatar-upload .avatar-edit input {
            display: none;
        }
        .avatar-upload .avatar-edit label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            background: #3b82f6;
            border-radius: 50%;
            color: white;
            cursor: pointer;
        }
        .avatar-upload .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #e2e8f0;
        }
        .avatar-upload .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .input-style {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            color: #1f2937;
            background-color: white;
        }
        .input-style:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .switch-btn {
            width: 100%;
            padding: 14px;
            border-radius: 10px;
            font-size: 15px;
            background-color: white;
            border: none;
            text-align: left;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        .switch-btn:after {
            content: "\f054";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 12px;
            color: #9ca3af;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <span>9:41</span>
        <div>
            <span class="mr-1"><i class="fas fa-signal"></i></span>
            <span class="mr-1"><i class="fas fa-wifi"></i></span>
            <span><i class="fas fa-battery-full"></i></span>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="px-4 pt-3 pb-20">
        <!-- 个人资料标题 -->
        <div class="flex justify-between items-center py-3">
            <h1 class="text-xl font-bold text-gray-800">个人中心</h1>
        </div>
        
        <!-- 用户资料卡片 -->
        <div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
            <div class="flex items-center mb-3">
                <div class="avatar-upload">
                    <div class="avatar-edit">
                        <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
                        <label for="imageUpload"><i class="fas fa-camera"></i></label>
                    </div>
                    <div class="avatar-preview">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="用户头像">
                    </div>
                </div>
                <div class="ml-5">
                    <h2 class="text-xl font-bold text-gray-800">小明</h2>
                    <p class="text-gray-500 text-sm">修改个人资料</p>
                </div>
            </div>
            
            <div class="flex justify-around text-center mt-5">
                <div>
                    <div class="text-lg font-bold text-gray-800">78%</div>
                    <div class="text-xs text-gray-500">近7天达标率</div>
                </div>
                <div class="border-l border-r border-gray-100 px-8">
                    <div class="text-lg font-bold text-blue-500">12</div>
                    <div class="text-xs text-gray-500">连续饮水天数</div>
                </div>
                <div>
                    <div class="text-lg font-bold text-gray-800">3</div>
                    <div class="text-xs text-gray-500">获得徽章</div>
                </div>
            </div>
        </div>
        
        <!-- 基本信息 -->
        <div class="section-header">基本信息</div>
        <div class="bg-white rounded-2xl shadow-sm p-4 mb-5">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">昵称</label>
                <input type="text" class="input-style" value="小明">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                <div class="flex space-x-3">
                    <label class="flex items-center">
                        <input type="radio" name="gender" class="mr-2 h-4 w-4 text-blue-500" checked>
                        <span>男</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="gender" class="mr-2 h-4 w-4 text-blue-500">
                        <span>女</span>
                    </label>
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">年龄</label>
                <input type="number" class="input-style" value="28">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">体重 (kg)</label>
                <input type="number" step="0.1" class="input-style" value="68.5">
            </div>
        </div>
        
        <!-- 日常活动量 -->
        <div class="section-header">日常活动量</div>
        <div class="bg-white rounded-2xl shadow-sm p-4 mb-5">
            <div class="mb-3">
                <div class="flex justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700">活动强度</span>
                    <span class="text-sm text-blue-500">适中</span>
                </div>
                <input type="range" min="1" max="4" value="2" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                <div class="flex justify-between text-xs text-gray-500 mt-1">
                    <span>轻度</span>
                    <span>适中</span>
                    <span>较高</span>
                    <span>剧烈</span>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">每日平均运动时间</label>
                <select class="input-style">
                    <option>不足30分钟</option>
                    <option selected>30-60分钟</option>
                    <option>1-2小时</option>
                    <option>2小时以上</option>
                </select>
            </div>
        </div>
        
        <!-- 饮水计划 -->
        <div class="section-header">饮水计划</div>
        <div class="bg-white rounded-2xl shadow-sm p-4 mb-5">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">每日目标水量 (ml)</label>
                <input type="number" step="100" class="input-style" value="2000">
                <div class="text-xs text-gray-500 mt-1">根据您的体重和活动量，建议每日饮水量为2000ml</div>
            </div>
            <div>
                <div class="flex justify-between mb-2">
                    <div class="text-sm font-medium text-gray-700">使用智能建议</div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" value="" class="sr-only peer" checked>
                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500"></div>
                    </label>
                </div>
                <div class="text-xs text-gray-500">开启后将根据您的身体状况和环境智能调整建议饮水量</div>
            </div>
        </div>
        
        <!-- 设置和隐私 -->
        <div class="section-header">设置与隐私</div>
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden mb-5">
            <button class="switch-btn border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-bell text-blue-500"></i>
                    </div>
                    <span>提醒设置</span>
                </div>
            </button>
            <button class="switch-btn border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-lock text-green-500"></i>
                    </div>
                    <span>隐私设置</span>
                </div>
            </button>
            <button class="switch-btn">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-question-circle text-purple-500"></i>
                    </div>
                    <span>帮助与反馈</span>
                </div>
            </button>
        </div>
        
        <!-- 退出登录 -->
        <button class="w-full bg-white text-red-500 font-medium py-3 rounded-xl shadow-sm mb-8 border border-red-100">退出登录</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="nav-bar">
        <div class="nav-item">
            <div class="nav-icon"><i class="fas fa-home"></i></div>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <div class="nav-icon"><i class="fas fa-list"></i></div>
            <span>记录</span>
        </div>
        <div class="nav-item">
            <div class="nav-icon"><i class="fas fa-chart-bar"></i></div>
            <span>统计</span>
        </div>
        <div class="nav-item active">
            <div class="nav-icon"><i class="fas fa-user"></i></div>
            <span>我的</span>
        </div>
    </div>
</body>
</html>